<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { listMarker, getMapData } from '@/api/dashboard'
import { getJSON } from './tiantai.js'
let map = null

// 点标记显示内容，HTML要素字符串
function markerContent(str, background) {
  return `<div class="custom-marker" style="background: url('/api/profile/upload/assets/${background}.png');">${str}</div>`
}

const mapData = ref({
  zoom: 10,
  center: '120.153576,30.287459',
})
onMounted(() => {
  getMapData().then((res) => {
    mapData.value = JSON.parse(res.data.content)
    mapData.value.zoom = Number(mapData.value.zoom)
    init(mapData.value)
  })
})
const init = (mapData) => {
  AMapLoader.load({
    key: '1fc51b0c951aeb41e426d47acd1aaee6', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.GeoJSON'], // 需要加载的插件
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        viewMode: '3D', // 是否为3D地图模式
        zoom: mapData.zoom, // 初始化地图级别
        center: mapData.center.split(','), // 初始化地图中心点位置
        // layers
      })
      // 构造官方卫星、路网图层
      var satelliteLayer = new AMap.TileLayer.Satellite()
      var roadNetLayer = new AMap.TileLayer.RoadNet()
      //批量添加图层
      map.add([satelliteLayer, roadNetLayer])
      map.remove(roadNetLayer)
      addMarks() //添加文本标记
      var geojson = new AMap.GeoJSON({
        geoJSON: getJSON(),
      })
      map.add(geojson)
    })
    .catch((e) => {
      console.log(e)
    })
}
const addMarks = () => {
  listMarker().then((res) => {
    let markers = res.rows
    markers.forEach((item) => {
      var marker = new AMap.Marker({
        position: item.position.split(','),
        content: markerContent(item.name, item.background),
      })
      if (item.type == 1) {
        marker.on('click', function (e) {
          popup.value.open()
          type.value = 1
          dialogImageUrl.value =
            import.meta.env.VITE_APP_BASE_API + item.content
        })
      } else if (item.type == 2) {
        marker.on('click', function (e) {
          window.open('//' + item.content)
        })
      }
      if (item.type == 3) {
        marker.on('click', function (e) {
          popup.value.open()
          type.value = 3
          content.value = item.content
        })
      }
      map.add(marker)
    })
  })
}
onUnmounted(() => {
  map?.destroy()
})
const popup = ref(null)
const type = ref(0)
const dialogImageUrl = ref('')
const content = ref('')
</script>

<template>
  <div id="container"></div>
  <Popup width="1012" height="717.49" title="预览" ref="popup">
    <div class="flex-center" style="height: 515px">
      <img
        :src="dialogImageUrl"
        style="width: 100%; height: 100%; object-fit: scale-down"
        v-if="type == 1"
      />
      <div class="map-content" v-html="content" v-else></div>
    </div>
  </Popup>
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 100%;
}

.custom-marker {
  width: 155px;
  height: 72px;
  line-height: 62px;
  text-align: center;
  color: #fff;
  user-select: none;
}

.map-content {
  width: 100%;
  height: 100%;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 25px;
  overflow: scroll;
}
</style>
